<template>
  <!-- RecordCouponCollection 领券记录 -->
  <PageContainer>
    <view class="container">
      <Tabs v-model="currentTab">
        <Header title="领券记录" :default-slot-content-height="78" :is-box-shadow="false">
          <TabNav tabBarColor="#D7B87C" />
        </Header>
        <TabsItem name="所有记录" :value="undefined"></TabsItem>
        <TabsItem name="已使用" :value="CouponOrderStatusEnum.USED"></TabsItem>
        <TabsItem name="未使用" :value="CouponOrderStatusEnum.RECEIVED"></TabsItem>
      </Tabs>
      <Paglist v-model="dataList" :is-init-api="false" :parame="parame" @register="register">
        <template v-for="v in dataList" :key="v.id">
          <view class="item-container" @click="toCard(v)">
            <view class="item-info">
              <view class="item-info_img">
                <TImage
                  :src="v.leadingAvatar"
                  width="150rpx"
                  height="180rpx"
                  border-radius="10rpx"
                />
              </view>
              <view class="item-info_text">
                <view class="info-name">
                  <view class="top-left">
                    <text class="leading-name text-overflow-1">{{ v.leadingName }}</text>
                    <text v-if="v.levelName" class="level-name">{{ v.levelName }}</text>
                  </view>
                  <image
                    v-if="v.leadingId"
                    class="card-icon"
                    src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-12.png"
                  />
                </view>
                <view class="company-info">
                  <text class="text-overflow-1" style="margin-right: 12rpx">
                    {{ v.companyName }}
                  </text>
                  <text class="text-overflow-1">{{ v.socialPosition }}</text>
                </view>
                <view class="info-time">
                  <view>
                    <text style="margin-right: 12rpx">领取时间</text>
                    <text>{{ v.createTime }}</text>
                  </view>
                  <view v-if="v.verificationTime">
                    <text style="margin-right: 12rpx">核销时间</text>
                    <text>{{ v.verificationTime }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="item-bottom">
              <view class="coupon-status">
                <template v-for="(item, i) in couponStatusText(v.status)" :key="i">
                  <text :style="{ color: item.color }">{{ item.text }}</text>
                </template>
              </view>
            </view>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  RecordCouponCollection  领券记录 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, reactive, ref, watch } from 'vue';
  import { CouponOrderStatusEnum } from '@/enums/memberCouponEnum';
  import {
    type AppUserCouponOrderMemberListData,
    type AppUserCouponOrderMemberListResult,
  } from '@/api/memberCoupon/types';
  import { appUserCouponOrderMemberList } from '@/api/memberCoupon';
  import { navigateTo, onLoad } from '@/router';
  import TImage from '@/components/TImage/index.vue';
  import dictionary from '@/utils/dictionary';

  const currentTab = ref<CouponOrderStatusEnum>();

  const dataList = ref<AppUserCouponOrderMemberListResult[]>([]);
  const parame = reactive<AppUserCouponOrderMemberListData>({
    current: 1,
    size: 10,
  });
  provide('api', appUserCouponOrderMemberList);
  const [register, { refresh }] = useConList();

  watch(currentTab, (val) => {
    parame.status = val ? val : void 0;
    refresh();
  });

  const couponStatusText = (status: CouponOrderStatusEnum) => {
    const dicts = dictionary.getLocal('couponReceivedStatus');
    const item = dicts.find((v) => v.dictValue == status);
    return [
      {
        color: item?.statusColor,
        text: item?.dictLabel,
      },
    ];
  };

  function toCard(item: AppUserCouponOrderMemberListResult) {
    item.leadingId &&
      navigateTo({
        name: 'personCard',
        options: {
          id: item.leadingId,
        },
      });
  }

  onLoad<'RecordCouponCollection'>((op) => {
    parame.couponId = op.couponId;
    refresh();
  });

  provide('tabIsShow', null);
</script>

<style lang="scss" scoped>
  .item-container {
    background-color: #fff;
    padding: 30rpx;
    padding-bottom: 0;
    margin-bottom: 30rpx;

    .item-info {
      display: flex;
      align-items: center;
      height: 180rpx;
      padding-bottom: 40rpx;

      &_img {
        width: 150rpx;
        flex-shrink: 0;
        margin-right: 30rpx;
      }

      &_text {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .info-name {
          color: #333;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .top-left {
            display: flex;
            align-items: center;
          }
          .leading-name {
            font-size: 32rpx;
            font-weight: bolder;
          }
          .level-name {
            margin-left: 14rpx;
            padding: 0 12rpx;
            background-color: #ece2c6;
            border-radius: 110rpx;
            font-size: 24rpx;
            flex-shrink: 0;
          }
          .card-icon {
            width: 40rpx;
            height: 26rpx;
            flex-shrink: 0;
            margin-left: 10rpx;
          }
        }

        .company-info {
          display: flex;
          align-items: center;
          color: #333;
          font-size: 28rpx;
        }

        .info-time {
          font-size: 24rpx;
          color: #aaabab;
        }
      }
    }

    .item-bottom {
      border-top: 1px solid #dddddd;
      min-height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .coupon-status {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 24rpx;
      }
    }
  }
</style>
